<template>
  <div class="contents">
    <el-row>
      <el-col :span="5">
        <span>发货日期</span>
        <el-date-picker
          type="date"
          placeholder="选择日期"
          style="width: 150px;"
        ></el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-select placeholder="默认库房">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-cascader :options="options" placeholder="全部分类"></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select placeholder="是否标品">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select placeholder="预打包状态">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入商品名称／编码／助记码">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div style="position: fixed; top: 15px; right: 350px; z-index: 9999;">
      <el-button type="primary" icon="el-icon-plus" @click="addPrePack">
        新增
      </el-button>
      <el-button>导出汇总表</el-button>
    </div>
    <el-table :data="table1" style="width: 100%; margin-top: 8px;">
      <el-table-column prop="address" label="商品名称" width="360px">
        <template slot-scope="scope">
          <el-button type="text">保存</el-button>
          <el-button
            type="text"
            style="margin-right: 10px;"
            @click="delCol(scope.$index)"
          >
            取消
          </el-button>
          <el-tooltip effect="dark" content="选择商品" placement="top">
            <el-autocomplete
              placeholder="请输入商品名称／编码／助记码"
            ></el-autocomplete>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="prepacknum" label="预打包数量" width="140px">
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="address" label="实时订"></el-table-column>
      <el-table-column prop="address" label="待包装"></el-table-column>
      <el-table-column prop="yespack" label="已包装"></el-table-column>
      <el-table-column prop="address" label="单位"></el-table-column>
      <el-table-column prop="address" label="描述"></el-table-column>
      <el-table-column prop="address" label="预打包状态"></el-table-column>
      <el-table-column prop="address" label="预打包进度"></el-table-column>
      <el-table-column prop="address" label="打包员"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-size="10"
      :page-sizes="[10, 20, 30, 40]"
      style="text-align: left;"
      :total="0"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        table1: [],
      }
    },
    methods: {
      addPrePack() {
        this.table1.push({ address: '', prepacknum: '', yespack: 0 })
      },
      delCol(index) {
        this.table1.splice(index, 1)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;
  }
</style>
